
<style> 
#showtml{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:100px;}
#list_show{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:120px;}
#time_tool { position:absolute; left:10px; top:10px; background:#FFFFFF; width:100%;}
.slidearea {
    padding: 10px 0;
}

.slidearea .slider {
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    top: -3px;
    left: 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #808080;
    background-color: #fff;
}

.slidearea .layui-progress-bar {
    -moz-transition: all 0s;
    -o-transition: all 0s;
    -webkit-transition: all 0s;
    transition: all 0s;
}
.BMap_cpyCtrl {
display:none !important;
}
.anchorBL{
display:none !important;
}
</style> 
<div id="map_box" class ="baidu-maps" style="width: 100%;height: 100%"></div> 
         
<div id="time_tool" style="color:white;background-color:rgba(320,138,138,0)">
  <form class="layui-form layui-form-pane " action="" id="trail_query_form" lay-filter="trail_query_form">
    <div class="layui-form-item" style="color:black">
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
          <select id="" name="trail_filter" xm-select="trail_filter" xm-select-type="1" xm-select-height="36px"  placeholder="轨迹过滤">
            <option value="satelite">BDS/GPS</option>
            <option value="wifi">WIFI</option>
            <option value="lbs">LBS</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
          <select id="tml_list" name="device_id"  lay-verify="required" lay-search="" class="layui-input" placeholder="" >
          </select>
        </div>
        <div class="layui-form-mid layui-word-aux">—</div>
        <a class="layui-btn" lay-submit="" lay-filter="trail_query"><i class="layui-icon layui-icon-search" style="font-size: 12px"></i></a>
        <a class="layui-btn" onclick="control_func('run')" ><i class="fa fa-play" style="font-size: 12px"></i></a>
        <a class="layui-btn" onclick="control_func('pause')" ><i class="fa fa-pause" style="font-size: 12px"></i></a>
        <a class="layui-btn" onclick="control_func('stop')" ><i class="fa fa-stop" style="font-size: 12px"></i></a>
        <a class="layui-btn" onclick="control_func('add_play_speed')" ><i class="layui-icon layui-icon-next" style="font-size: 12px"></i></a>
        <a class="layui-btn" onclick="control_func('prev_play_speed')" ><i class="layui-icon layui-icon-prev" style="font-size: 12px"></i></a>
      </div>
      <div class="layui-inline" >
        <div class="layui-input-inline" style="font-size: 12px;width: 60px">
          <select class="layui-select" id="play_speed" name="play_speed">
          <option value="1400">7X</option>
          <option value="1200">6X</option>
          <option value="1000">5X</option>
          <option value="800">4X</option>
          <option value="600">3X</option>
          <option value="400" selected="">2X</option>
          <option value="200">1X</option>
        </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline slidearea">
          <div class="layui-progress" lay-showpercent="true" lay-filter="trail_progress">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%" ><font id="play_pro"  style="color:black"></font></div>
            <span class="slider"></span>
          </div>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green" style="font-size: 12px;width: 60px">详情</label>
        <div class="layui-input-inline">
          <input id="" type="checkbox" lay-skin="switch" lay-text="ON|OFF" checked name="detail_info_show">
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 百度地图的相关调用，定位打点，地址解析等 -->
<script type="text/javascript" src="/static/js/bd_map.js"></script>
<script type="text/javascript">


// $('.layui-body').attr('style','padding:0px;bottom:0px;left:0px') 
// $('.layui-side').hide()

formSelects.render()
formSelects.value('trail_filter', ['satelite'])

var add_dev_detail=function(dev){
  var rssi=dev.dynamic.rssi
  var dev_loca=dev.dynamic.location
  var user_detail=dev.user_detail;
  var dev_user_name=dev.user_name;
  var param1=user_detail.customize_title1+'：'+user_detail.customize_value1
  var param2=user_detail.customize_title2+'：'+user_detail.customize_value2
  var param3=user_detail.customize_title3+'：'+user_detail.customize_value3

      //信息窗口参数
  var o = {
    width : 470,     // 信息窗口宽度
    height: 450,     // 信息窗口高度
    };
  var trail_window=
        '<div class="layui-row" style="height:300px";>'+
          '<div class="layui-col-md2" style="padding:2px;background-color: #F2F2F2;">'+
            '<div class="layui-card">'+
              '<div class="layui-card-body">'+
                '<table class="layui-table" lay-size="sm" lay-skin="nob" style="font-size:13px;height: 140px";>'+
                  '<tr >'+
                  '<td colspan=2><font>'+'名称： '+dev_user_name+'</font></td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td colspan=2>'+'设备ID： '+dev.device_id+'</td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td >'+param1+'</td>'+'<td >'+param2+'</td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td >'+param3+'</td>'+
                  '</tr>'+
                  '</table>'+
              '</div>'+
            '</div>'+
          '</div>'+
          '<div class="layui-col-md10" style="padding:2px">'+
            '<table id="trail_detail_table" class="layui-table" style="padding:0px;margin:-5px" lay-filter="trail_detail_table"></table>'+
          '</div>'+
        '</div>'
  ;
  $('.layui-footer').empty()
  $('.layui-footer').append(trail_window)
};

var interact_table=function(d){
  table.render({
    elem: '#trail_detail_table',
    data: d,
    id:'trail_detail_table',
    skin:'nob',
    size:'sm',
    height:'155',
    cols: [[
        {field: 'index_num',width:80, title: '序号',templet:function(d){
          return d.LAY_INDEX
        }},
        {field: 'mileage',width:80, title: '里程',sort:true},
        {field: 'dirct',width:80, title: '方向',sort:true},
        {field: 'speed',width:80, title: '速度',sort:true},
        {field: 'serv_receive',width:180, title: '时间',sort:true},
        {field: 'location', title: '位置',templet:function(d){
          if(d.lng==0 | d.lng=='0'){
            return '地址为空'
          }else{
            return '<a id="trail'+d.id+'" class="layui-btn layui-btn-primary layui-btn-xs" >'+d.lng+'，'+d.lat+'</a>'
          }
          return d.lng+'，'+d.lat
        }},
    ]],
    limit:10000000
    // page: false
  });
}

table.on('row(trail_detail_table)',function(obj){
  // console.log(obj.data)
  // chose_dev.dynamic=obj.data
  // chose_dev.lng=obj.data.lng
  // chose_dev.lat=obj.data.lat
  var point=new BMap.Point(obj.data.lng,obj.data.lat)
  get_bdmap_addr(point,chose_dev.device_id)
  setTimeout(function(){
    obj.data.device_id=chose_dev.device_id
    open_simple_infowindow(obj.data);
    $('#trail'+obj.data.id).text(all_addr_obj[chose_dev.device_id])
  },200)
})

// 自定义轨迹路线播放功能
var trail_opt={};
var chose_dev;
trail_opt['play_speed']=parseInt($('#play_speed').val())
form.on('submit(trail_query)',function(obj){
  var trail_filter=formSelects.value('trail_filter','val')
  if(trail_filter.length==0){
    trail_filter=['satelite']
  }

  var trail_param=obj.field
  trail_param.trail_filter=trail_filter
  trail_param.map_kind='bd'
  chose_dev=get_detail_from_id(device,obj.field.device_id)
  if(obj.field.device_id!=='' && obj.field.detail_info_show=='on'){
      $('.layui-body').attr('style','padding:0px;bottom:160px;left:0px')
      $('.layui-footer').attr('style','height:160px')
      $('.layui-footer').show()
      $('.layui-side').hide()
      add_dev_detail(chose_dev)
  }else{
    $('.layui-body').attr('style','padding:0px;bottom:0px;left:0px')
    $('.layui-footer').empty()
    $('.layui-footer').hide()
  }

  post_info_ajax(trail_param,'trail','get_trail',handle_trail)

});

var handle_trail=function(pts){
  var dev=chose_dev
  interact_table(pts)
  var tarckpoint=new Array();
  if(pts.length==0){
    layer.msg('该时间段没有轨迹数据');
    return false;
  };
  // 清除之前的覆盖物
  map.clearOverlays()
  //轨迹点封装
  trail_opt['point_order']={}

  for(var i=0;i<pts.length;i++){
    var point_len=pts.length
    var point_order=(Math.round((1/point_len)*100))*i+'%'
    var lng=pts[i]['lng']
    var lat=pts[i]['lat']
    
    var pt_trail = new BMap.Point(lng,lat);
    pt_trail['html']='<div>'+pts[i]['serv_receive']+','+pts[i]['speed']+'公里/小时</div>'
    pt_trail['dev_datail']=pts[i]
    trail_opt['point_order'][point_order]=pt_trail
    tarckpoint.push(pt_trail);
  };
  var trail_points_show = new BMap.PointCollection(tarckpoint, {size: BMAP_POINT_SIZE_NORMAL,shape: BMAP_POINT_SHAPE_CIRCLE,
  color: '#18a45b'});
  trail_points_show.addEventListener('click', function (e) {
    dev.dynamic=e.point.dev_datail
    var pt=new BMap.Point(dev.dynamic.lng,dev.dynamic.lat)
    get_bdmap_addr(pt,dev.device_id)
    setTimeout(function(){open_device_infowindow(dev)},200)
  })
  map.addOverlay(trail_points_show)

  trail_opt['tarckpoint']=tarckpoint
  trail_opt['status']='f_run'
  trail_opt['current_pt']=0
  pts[0].user_detail=dev.user_detail
  dev.dynamic=pts[0]
  dev.lng=pts[0].lng
  dev.lat=pts[0].lat
  carMk=add_device_marker_bdmap(dev,'no')
  trail_opt['carMk']=carMk
  // console.log(tarckpoint)
  start_Icon = new BMap.Icon("/static/img/start.png", new BMap.Size(100,60),{anchor : new BMap.Size(20, 42),imageSize:new BMap.Size(40, 40)});
  end_Icon = new BMap.Icon("/static/img/end.png", new BMap.Size(100,60),{anchor : new BMap.Size(20, 42),imageSize:new BMap.Size(40,40)});
  var endpoint=new BMap.Point(tarckpoint[tarckpoint.length-1].lng,tarckpoint[tarckpoint.length-1].lat);
  var startpoint=new BMap.Point(tarckpoint[0].lng,tarckpoint[0].lat);
  var startmarker = new BMap.Marker(startpoint,{icon:start_Icon});
  var endmarker=new BMap.Marker(endpoint,{icon:end_Icon});
  startmarker.setTitle('start');
  endmarker.setTitle('end');
  map.addOverlay(startmarker); 
  map.addOverlay(endmarker); 
  draw_line_bdmap(tarckpoint)
  map.setViewport(tarckpoint);
}


var control_func=function(func){
  if(trail_opt.tarckpoint==null){
    layer.msg('请先查询轨迹')
    return
  }
  if(func=='run'){
    move_on_line(trail_opt,setSlider)
  }else if(func=='pause'){
    trail_opt['status']='pause'
  }else if(func=='stop'){
    trail_opt['status']='stop'
  }else if(func=='add_play_speed'){
    trail_opt['play_speed']=trail_opt['play_speed']+200
    if (trail_opt['play_speed']>1400){
      trail_opt['play_speed']=1400
    }
    form.val('trail_query_form',{'play_speed':trail_opt['play_speed'].toString()})
  }else if(func=='prev_play_speed'){
    trail_opt['play_speed']=trail_opt['play_speed']-200
    if (trail_opt['play_speed']<200){
      trail_opt['play_speed']=200
    }
    form.val('trail_query_form',{'play_speed':trail_opt['play_speed'].toString()})
  }
}


fill_raido_func(device,'tml_list','user_name','device_id')
form.render()   


laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});


// 进度条拖动功能开始
var setSlider = function (value, filter) {
  if (value > 1) value = 1;
  if (value < 0) value = 0;
  var selectFilte = '';
  if (filter)
      selectFilter = '[lay-filter="' + filter + '"]';
  //设置进度条位置
  element.progress(filter, value * 100 + '%');
  //设置滑块位置
  $('.slider').css('left', $('.layui-progress' + selectFilter).children('.layui-progress-bar')[
      0].offsetWidth - 5 + 'px');
  $('#play_pro').text(Math.round(value * 100) + '%');
  return Math.round(value * 100) + '%';
}
var move = false;
//鼠标按下
$('.slidearea').on('mousedown', function (event) {
  if (event.button === 0 && trail_opt['status']!=null) {
    move = true;
    var offsetX = event.target == $('.slider')[0] ? Number($(event.target).css('left').replace(
        'px', '')) + event.offsetX : event.offsetX;
    var value = Math.round(offsetX / $(this).width() * 100) / 100;
    $('#play_pro').text(setSlider(value, 'trail_progress'));
  }
});
// 鼠标放开
$('.slidearea').on('mouseup', function (event) {move=false})
//鼠标移动
$(".slidearea").on("mousemove", function (event) {
  event.preventDefault();
  if (move && trail_opt['status']!=null) {
    var offsetX = event.target == $('.slider')[0] ? Number($(event.target).css('left').replace(
        'px', '')) + event.offsetX : event.offsetX;

    var value = Math.round(offsetX / $(this).width() * 100) / 100;
    var percent_num=setSlider(value, 'trail_progress')

    $('#play_pro').text(percent_num);

    if(trail_opt['point_order'][percent_num]){
      var order_num=trail_opt['point_order'][percent_num]
      carMk=trail_opt['carMk']
      mk_label=carMk.getLabel()
      mk_label.setContent(order_num.html)
      carMk.setLabel(mk_label)
      carMk.setPosition(order_num);
      map.panTo(order_num);
    }
  }
});
// 进度条拖动功能结束

</script>

